<template>
    <div class="l-rblock l-desktop" >
        <div v-show="steps(0)" class="l-rblock" style="padding:24px;" >
            <div class="l-page-panel" >
                <el-form :model="formData" :rules="rules" size="mini"  ref="baseInfo" label-width="80px" >
                    <el-col :span="24">
                        <el-form-item label="名称" prop="f_Name">
                            <el-input v-model="formData.f_Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="图标" prop="f_Icon">
                            <l-input-icon onlyFirst v-model="formData.f_Icon" >
                            </l-input-icon>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="分类" prop="f_PModuleId">
                            <el-select v-model="formData.f_PModuleId" placeholder="请选择分类">
                                <el-option
                                v-for="item in lr_dataItem['function']"
                                :key="item.f_ItemValue"
                                :label="item.f_ItemName"
                                :value="item.f_ItemValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="排序" prop="f_SortCode">
                            <el-input-number v-model="formData.f_SortCode"  controls-position="right" :min="1" ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="首屏"  prop="f_IsFirst"  >
                                <el-switch
                                :active-value="3"
                                :inactive-value="4"
                                v-model="formData.f_IsFirst"
                                >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="状态"  prop="f_EnabledMark"  >
                            <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="formData.f_EnabledMark"
                                >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="描述" prop="f_Description">
                            <el-input type="textarea" :rows="4" v-model="formData.f_Description"></el-input>
                        </el-form-item>
                    </el-col>                   
                </el-form>
            </div>
        </div>
        <div v-show="steps(1)" class="l-rblock" >
            <l-quick-bi-design 
                ref="quickBiDesign" 
                :isApp="true" 
                :isShow="steps(1)"
                :componentList="componentList" 
                :noDataConfigComponents="noDataConfigComponents" >
            </l-quick-bi-design>
        </div>
    </div>
</template>
<script>

import componentList from './components'
import './components/base'
import './components/view'

const apiAppFunction = window.$api.mapp.module
export default {
    provide () {
        return {
            appDesign: this
        };
    },
    props:{
        stepActive:{
            type:Number,
            default:0
        }
    },
    data(){
        return {
            componentList,
            noDataConfigComponents:['app-datalist','app-mytask','app-mytasklist'],
            formData:{
                f_Type:2, // 移动桌面
                f_Name:'',
                f_Icon: 'learun-icon-desktop-design',
                f_PModuleId:'',
                f_SortCode:'',
                f_IsMenu:0,
                f_EnabledMark:1,
                f_IsFirst:3,
                f_Description:''
            },
            rules: {
                f_Name: [
                    { required: true, message: '请输入名称',trigger: 'blur' }
                ],
                f_Icon: [
                    { required: true, message: '请选择图标',trigger: 'blur' }
                ],
                f_PModuleId: [
                    { required: true, message: '请选择分类',trigger: 'blur' }
                ],
            },
            layout: [],
            apps:[]
        }
    },
    computed:{
        appTree(){
            let list = this.apps
            const map = {}
            const res = []
            const dataItemList = this.lr_dataItem['function']
            dataItemList.forEach(item => {
                let point = {
                    label:item.f_ItemName,
                    value:item.f_ItemValue,
                    disabled: true,
                    children:[]
                }
                map[item.f_ItemValue] = point.children
                res.push(point)
            })
            list.forEach(item => {
                if(item.f_IsSystem != 3 && item.f_IsSystem != 4){
                    item.label = item.f_Name
                    item.value = item.f_Id
                    if(!map[item.f_Type]){
                        let point = {
                            label:item.f_Type,
                            value:item.f_Type,
                            children:[]
                        }
                        map[item.f_Type] = point.children
                        res.push(point)
                    }
                    map[item.f_Type].push(item)
                }
            })
            return res
        }
    },
    mounted () {
        this.lr_loadDataSourceList()
        this.loadAppList()
    },
    methods:{
        async loadAppList(){
            await this.lr_loadDataItem('function')
            this.apps = await this.$awaitWraper(apiAppFunction.getList())
        },
        resetForm(){
            this.formData.f_Id = ''
            this.$refs.baseInfo && this.$refs.baseInfo.resetFields()
            this.$refs.quickBiDesign && this.$refs.quickBiDesign.set([])
        },
        getForm(){
            const postData = {
                lr_desktop_infoEntity:this.$deepClone(this.formData),
                lr_desktop_schemeEntity:{
                    f_Content:JSON.stringify(this.$refs.quickBiDesign.get())
                }
            }

            if(postData.lr_desktop_infoEntity.f_IsFirst == 3){
                postData.lr_desktop_infoEntity.f_IsMenu = 0
            }
            else{
                postData.lr_desktop_infoEntity.f_IsMenu = 1
            }

            postData.functionEntity = {
                f_Name: postData.lr_desktop_infoEntity.f_Name,
                f_Type: postData.lr_desktop_infoEntity.f_PModuleId,
                f_Icon: postData.lr_desktop_infoEntity.f_Icon,
                f_IsSystem: postData.lr_desktop_infoEntity.f_IsFirst, // 桌面设计
                f_EnabledMark:postData.lr_desktop_infoEntity.f_EnabledMark,
                f_SortCode: postData.lr_desktop_infoEntity.f_SortCode,
                f_Color:'#3c9cff'
            }

            return new Promise((resolve)=>{
                window.html2canvas(this.$refs.quickBiDesign.$el.children[1].children[1].children[1].children[1].children[0].children[1], {
                    useCORS: true,
                    backgroundColor: '#dcdfe6',
                    allowTaint: true,
                    width:381
                }).then(canvas => {
                    postData.lr_desktop_infoEntity.img = canvas.toDataURL('image/jpeg')
                    resolve(postData)

                })
            })
        },
        setForm(data){
            this.formData = data.lr_desktop_infoEntity
            this.$refs.quickBiDesign.set(JSON.parse(data.lr_desktop_schemeEntity.f_Content))
        },

        steps(num){
            return this.stepActive == num
        },
        validateBaseInfo(){
            return new Promise((resolve) => {
                this.$refs.baseInfo.validate((valid) => {
                    if(valid){
                        resolve(true)
                    }
                    else{
                        resolve(false)
                    }
                })
            })
        },
        validateSteps(){
            return new Promise((resolve) => {
                if(this.stepActive == 0){
                    // 判断基础信息是否填写完整
                    this.validateBaseInfo().then(res=>{
                        resolve(res)
                    })
                }
                else{
                    resolve(true)
                }
            });
        }

    }
}
</script>

